﻿@using ZFY.UMC.Identity.Model.Client
@model List<ClientViewModel>

<div id="client">
	<div class="page">
		@foreach (var client in Model)
		{

	  <el-card class="box-card" shadow="hover" v-on:click.native.native="openUrl('@client.ClientUrl')">
	   <img src="@client.LogoUrl" />

	   <div class="clientName">@client.ClientName</div>
	  </el-card>
		}
 </div>
 <div>
  <el-pagination hide-on-single-page="true"
					   small
					   layout="prev, pager, next"
					   :total="@Model.Count"
					   v-on:current-change="pageChange"
					   :current-page="@Context.Request.Query["pageindex"]"
					   page-size="8">
  </el-pagination>
 </div>


</div>

@section scripts
{
<script>


	  var client = new Vue({
	  el: '#client',
	  data: {
	  },
	  methods: {
		   openUrl(url) {
		  console.log(url)
			if(url){
			  window.location.href = url;
		  }
		},
		pageChange(page){
			window.location.href = "/client/index?pageindex=" + page;
		}
	  }
	})

</script>
}
@section styles{
<style>
	.page {
		flex-wrap: wrap;
		display: flex;
		width: 950px;
	}

	.box-card {
		width: 200px;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.8);
		margin: 15px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

		.box-card:hover {
			cursor: pointer;
			background: rgba(255, 255, 255, 1);
		}

		.box-card img {
			width: 150px;
			height: 150px;
		}

	.el-card__body {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;
	}

	.clientName {
		margin: 20px 0 0 0;
		word-break: break-all;
		text-align: center;
	}

	.el-pagination .btn-next,
	.el-pagination .btn-prev {
		background-color: transparent !important;
	}

	.el-pager li.active {
		color: white;
		cursor: default;
	}

	.el-pager li:hover {
		color: white;
	}

	.el-pagination {
		text-align: center
	}

	#client .el-pager .number {
		background-color: transparent;
	}
</style>
}